<template>
    <el-container class="main-container full-height">
      <div :style="getContainerStyle">
        <div ref="container" style="width: 100%;height: 100%" ></div>
      </div>
    </el-container>
</template>

<script setup lang="ts">
import {ref, onMounted, computed} from "vue";
import {getFlowOptions, initFlow} from "../design/init-container";
import '@logicflow/extension/lib/style/index.css'
import '@logicflow/core/dist/style/index.css'

 const props = defineProps({
  code: Object,
 })

const code = JSON.parse(JSON.stringify(props.code))

 const container = ref<HTMLElement>()

// 画布尺寸样式
const getContainerStyle = computed(() => {
  let canvasSize:any = getCanvasSize()
  return `width: ${canvasSize.width};height: ${canvasSize.height};`;
})

// 根据模式获取画布尺寸
const getCanvasSize = () => {
  let width = 1920
  let height = 1080
  let baseProportion = parseFloat((width / height).toFixed(5))
  console.log(code)
  if (code.lfData.model == 'screen' || code.lfData.model == 'topology') {
    baseProportion = parseFloat((width / height).toFixed(5))
  }
  if (code.lfData.model == 'mobile') {
    baseProportion = parseFloat((9 / 16).toFixed(5))
  }
  if (code.lfData.model == 'pad') {
    baseProportion = parseFloat((4 / 3).toFixed(5))
  }
  const currentRate = parseFloat((width / height).toFixed(5))
  if (currentRate > baseProportion) {
    return {width: (height * baseProportion) + "px",height: height +"px"}
  } else {
    return {width: width + 'px',height: (width / baseProportion) +"px"}
  }
}

const modeler = initFlow()

// init
onMounted(() => {
  if (!container.value) {
    console.log('error container is null')
    return
  }
  const logicflowOptions = getFlowOptions(container.value,"view")
  logicflowOptions.grid = false

  let background:any = {}
  if (code.lfData.setting.backgroundImage){
    background.backgroundImage = `url(${code.lfData.setting.backgroundImage})`
    background.backgroundRepeat = "no-repeat"
    if (code.lfData.setting.backgroundType == 'adaption') {
      background.backgroundSize = "cover"
    }
    if (code.lfData.setting.backgroundType == 'adaptionX') {
      background.backgroundSize = `1920px auto`
    }
    if (code.lfData.setting.backgroundType == 'adaptionY') {
      background.backgroundSize = `auto 1080px`
    }
    if (code.lfData.setting.backgroundType == 'adaptionFil') {
      background.backgroundSize = `1920px 1080px`
    }
  }
  if (code.lfData.setting.backgroundColor) {
    background.backgroundColor = code.lfData.setting.backgroundColor
  }

  logicflowOptions.background = background

  modeler.initLogicFlow(logicflowOptions)
  modeler.lf?.renderRawData(code.data)
})

</script>

<style lang="scss" scoped>
  .center-view-container{
    height: 100%;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>
